<template>
    <div>
        <a-card style="padding: 0px" v-if="!hasBrand">
            <a-form-model
                    hide-required-mark
                    ref="brandApplyForm"
                    :rules="brandRules"
                    :model="brandApplyData"
                    :wrapperCol="wrapperCol"
                    :label-col="labelCol"
            >
                <a-form-model-item class="form-item" label="品牌名" prop="name">
                    <a-input v-model="brandApplyData.name" class="form-input"></a-input>
                </a-form-model-item>
                <a-form-model-item class="form-item" label="描述">
                    <a-input v-model="brandApplyData.desc" class="form-input"></a-input>
                </a-form-model-item>
                <a-form-model-item class="form-item" label="品牌Logo上传" prop="logo">
                    <up-load
                            :common-upload="true"
                            fieldlName="brandLogo"
                            :image-url="brandApplyData.logo"
                            @change-image-url="changeAndSetUrl"
                    ></up-load>
                </a-form-model-item>


                <a-form-model-item class="form-item" style="margin-left: 240px">
                    <a-button style="width: 200px;" type="primary" @click="applyBrand('brandApplyForm')">申请</a-button>
                </a-form-model-item>
            </a-form-model>

        </a-card>
        <a-card style="padding: 0px" v-if="hasBrand">
            <a-form-model
                    hide-required-mark
                    ref="addCateForm"
                    :model="addBrandCateData"
                    :wrapperCol="wrapperCol"
                    :label-col="labelCol"
            >
                <a-form-model-item class="form-item" label="品牌名" prop="brand">
                    <a-input readOnly v-model="addBrandCateData.brand.name" class="form-input"></a-input>
                </a-form-model-item>
                <a-form-model-item v-if="addBrandCateData.brand.logo!==''" class="form-item" label="Logo" prop="brand">
                    <img :src="addBrandCateData.brand.logo" style="width: 120px;height: 100px"/>
                </a-form-model-item>
                <a-form-model-item class="form-item" label="已有分类" prop="brand">
                    <a-card>
                        <a-tree
                                v-model="checkedKeys"
                                checkable
                                @expand="onExpand"
                                @select="onSelect"
                                :expanded-keys="expandedKeys"
                                :auto-expand-parent="autoExpandParent"
                                :selected-keys="selectedKeys"
                                :tree-data="cateTree"
                                :replace-fields="replaceFields"
                        >
                        </a-tree>
                    </a-card>
                </a-form-model-item>


                <a-form-model-item class="form-item" style="margin-left: 240px">
                    <a-button style="width: 200px;" type="primary" @click="submitCateBind">提交</a-button>
                </a-form-model-item>
            </a-form-model>

        </a-card>
    </div>
</template>

<script>
    import UpLoad from "../../../../components/upload/UpLoad";
    import brandApi from "../../../../api/goods/brandApi";
    import cateApi from "../../../../api/cateApi";
    import companyApi from "../../../../api/user/companyApi";

    export default {
        name: "brandApply",
        components: {UpLoad},
        data() {
            return {
                brandApplyData: {
                    name: "",
                    desc: "",
                    logo: ""
                },
                brandRules: {
                    name: [
                        {required: true, message: "请填写品牌名", trigger: "blur"}
                    ]
                },
                //分类绑定表单相关数据
                addBrandCateData: {
                    brand: {
                        id: null,
                        logo: "",
                        name: ""
                    },
                    boundCategoryIds: []
                },
                replaceFields: {
                    title: 'name',
                    key: 'id'
                },
                cateTree: [],
                expandedKeys: [],
                autoExpandParent: false,
                selectedKeys: [],
                checkedKeys: [],
                hasBrand: false,
                labelCol: {span: 4},
                wrapperCol: {span: 10},
            }
        },
        watch: {
            checkedKeys(val) {
                console.log('onCheck', val);
                this.checkedKeys = val
            },
        },
        created() {
            this.initTreeData()
            this.fetchBrandCateData();
        },
        methods: {
            changeAndSetUrl(field, url) {
                console.log(field, url)
                let fieldName = field + ''
                if (fieldName === "brandLogo") {
                    this.brandApplyData.logo = url
                }
            },
            applyBrand(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {

                        console.log(this.brandApplyData)
                        brandApi.applyBrand(this.brandApplyData).then(resp => {
                            if (resp.data.flag) {
                                this.$message.success("申请成功，请耐心等待审核");
                                this.brandApplyData = {
                                    name: "",
                                    desc: "",
                                    logo: ""
                                }
                            }
                        })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            /////////////绑定分类相关///////////
            /**
             * 提交分类绑定
             */
            submitCateBind() {
                if (this.checkedKeys.length <= 0) {
                    this.$message.warning("请选择绑定的分类");
                    return;
                }
                let bindData = {
                    brandId: this.addBrandCateData.brand.id,
                    bindCategoryIds: this.checkedKeys
                }
                console.log(bindData)
                brandApi.brandBindCate(bindData).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.fetchBrandCateData()
                    }
                })
            },
            /**
             * 获取已绑定品牌和分类
             */
            fetchBrandCateData() {
                brandApi.fetchBrandCateData().then(resp => {
                    if (resp.data.flag) {
                        this.addBrandCateData = resp.data.data
                        if (resp.data.data.brand !== null) {
                            this.hasBrand = true;
                        }
                        if (resp.data.data.boundCategoryIds && resp.data.data.boundCategoryIds.length > 0) {
                            this.checkedKeys = resp.data.data.boundCategoryIds
                            this.expandedKeys = this.checkedKeys
                        }
                    }
                })
            },
            /**
             * 分类树
             */
            initTreeData() {
                cateApi.categoryTree().then(resp => {
                    let respData = resp.data;
                    if (respData.flag) {

                        // this.addSlot(respData.data)
                        if (respData.data.length > 0) {
                            respData.data.forEach(cate1 => {
                                cate1.checkable = false;
                                if (cate1.children.length > 0) {
                                    cate1.children.forEach(cate2 => {
                                        cate2.checkable = false;
                                    })
                                }
                            })
                        }
                        this.cateTree = respData.data
                        console.log(this.cateTree)
                    }
                })
            },
            onExpand(expandedKeys) {
                console.log('onExpand', expandedKeys);
                this.expandedKeys = expandedKeys;
                this.autoExpandParent = false;
            },
            onSelect(selectedKeys, info) {
                console.log('onSelect', info);
                this.selectedKeys = selectedKeys;
            },
        }
    }
</script>

<style scoped>

</style>